<script>
import axios from "axios";
import instance from "@/api/axios";
export default {
  name: "axiosPage",
  data(){
    return{
      src:'',
      imgList:[],
      courseList:[],
      boutiqueCourseList:[]
    }
  },
  methods:{
    getCourseList(type){
      return axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
        type,
        pageNum:1,
        pageSize:5
      },{headers:{
          'Content-Type':'application/x-www-form-urlencoded'
        }})
        //   .then(res=>{
        // console.log(res)
        // this.courseList = res.data.rows
      // })
    }
  },
  created(){
    // get只有一个参数，url地址
    axios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=5').then(res=>{
      console.log(res)
      this.src = res.data.data[0].imgUrlPc
      this.imgList = res.data.data
    })
    // 三个参数：url地址，请求参数，url配置
    // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
    //   type:'free',
    //   pageNum:1,
    //   pageSize:5
    // },{headers:{
    //   'Content-Type':'application/x-www-form-urlencoded'
    //   }}).then(res=>{
    //   console.log(res)
    //   this.courseList = res.data.rows
    // })
    console.log(instance)
    console.log(this.getCourseList())
    this.getCourseList('free').then((res)=>{
      console.log(res)
      this.courseList = res.data.rows
    })
    this.getCourseList('boutique').then((res)=>{
      console.log(res)
      this.boutiqueCourseList = res.data.rows
    })

  }
}
</script>

<template>
<div>
  <img :src="src" alt="">
  <img v-for="item in imgList" :key="item.id" :src="item.imgUrlPc" alt="">
  <div class="container">
    <div class="course" v-for="item in courseList" :key="item.courseId">
      <div>
        <img :src="item.coverFileUrl" alt="">
      </div>
      <div>{{ item.courseTitle }}</div>
      <div>学习人数{{item.learningNum}}</div>
      <div v-if="item.isFree === '1'">
        免费
      </div>
      <div v-else-if="item.isDiscount === '1'">
        {{item.discountPrice}} <del>{{item.coursePrice}}</del>
      </div>
      <div v-else>
        {{item.coursePrice}}
      </div>
    </div>
  </div>


  <div class="container">
    <div class="course" v-for="item in boutiqueCourseList" :key="item.courseId">
      <div>
        <img :src="item.coverFileUrl" alt="">
      </div>
      <div>{{ item.courseTitle }}</div>
      <div>{{item.learningNum}}</div>
      <div>免费</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.container{
  display: flex;
  justify-content:space-between;
}
.course{
  width: 18%;
  img{
    width: 100%;
  }
}
</style>